<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>插槽-内容分发</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <my-parent>我是aaabbb</my-parent>
    </div>
    <template id="com">
        <div>
            <!-- 如果 template 中没有包含一个 <slot> 元素，
                则该组件起始标签和结束标签之间的任何内容都会被抛弃。 -->
            <!-- <slot></slot> -->
            我是内容
            <slot></slot>
            <br>我是子组件的数据{{url}} {{num}}<br>
            <slot></slot>
        </div>
    </template>

    <template id="father">
        <div>
            <slot></slot>
            <my-son url="/profile" :num="count">我是只能拿到的数据count {{count}} url和num的数据拿不到 {{url}} {{num }}</my-son>
            <!-- 此处的url num是访问不到的, 会报错warn 父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。-->
            <slot></slot>
        </div>
    </template>

    <script>
        const Com = {
            props:['url', 'num'],
            template: '#com'
        }

        const Father = {
            template: '#father',
            data() {
                return {
                    count: 68
                }
            },
            components: {
                'mySon': Com
            }
        }
    
        new Vue({
            el: '#app',
            components: {
                'myParent': Father
            }
        })
    </script>
</body>
</html>